<template>
  <!-- 二手车发布 -->
  <div>
    <div class="form">
      <div class="name">二手车发布</div>
      <div class="tag-btn-wrap" v-if="user && user.id && user.isAgent == '0'">
        信息太多，不想填写？→
        <div class="tag-btn" style="margin-left: 12px" @click="delegate(3)">
          委托发布
        </div>
      </div>
      <div class="list">
        <div class="li">
          <div class="left"><span>*</span>车辆类型</div>
          <div class="right">
            <el-select
              v-model="xcData.vehicleClassification"
              placeholder="请选择类型"
              @change="handleCommand"
            >
              <el-option
                v-for="i in type4"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>车辆品牌型号</div>
          <div
            class="right"
            @click="(dialogppcx = true), queryBrand(), stopMove()"
          >
            <el-input
              style="pointer-events: none"
              id="input__inner"
              type="text"
              v-model="xcData.vehicleBrandModel"
              placeholder="点击选择车辆品牌型号"
            ></el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>燃油类型</div>
          <div class="right">
            <el-select
              v-model="xcData.fuelType"
              placeholder="请选择类型"
              @change="handleCommand"
            >
              <el-option
                v-for="i in type5"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>看车地点</div>
          <div class="right">
            <el-input
              id="input__inner"
              v-model="xcData.carViewingPlace"
              v-if="xcData.carViewingPlace"
            >
              <el-button
                slot="append"
                icon="el-icon-location"
                @click="addressopen"
              ></el-button>
            </el-input>
            <el-input
              id="input__inner"
              v-model="xcData.carViewingPlace"
              disabled
              v-else
              placeholder="请选择定位获取地址"
            >
              <el-button
                slot="append"
                icon="el-icon-location"
                @click="addressopen"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>车源地</div>
          <div class="right">
            <el-input
              id="input__inner"
              type="text"
              v-model="xcData.remarks"
              placeholder="请填写车源地"
            >
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>里程</div>
          <div class="right">
            <el-input
              id="input__inner"
              type="text"
              v-model="xcData.mileage"
              onkeyup="
                value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') // 只能输入数字、小数点限制3位
                .replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
                .replace(/^\./, '0.')  // 如果输入的第一位为小数点，则替换成 0. 实现自动补全
                .match(/^\d*(\.?\d{0,3})/g)[0] || '' // 数字开头、小数点3位
					    "
              @blur="
                xcData.mileage =
                  $event.target.value.match(/^\d*(\.?\d{0,3})/g)[0] || ''
              "
              placeholder="请填写里程"
            >
              <template slot="append">公里</template>
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left">过户次数</div>
          <div class="right">
            <el-input
              id="input__inner"
              type="number"
              v-model="xcData.numberTransfer"
              placeholder="请填写过户次数"
            >
              <template slot="append">次</template>
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>上牌时间</div>
          <div class="cxjgRight">
            <el-select
              v-model="xcData.licensingTimeYear"
              @change="handleCommandYear"
            >
              <el-option
                v-for="i in type66"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueNum"
              ></el-option>
            </el-select>
            <span class="cxjgRight_span">年</span>
            <el-select
              v-model="xcData.licensingTimeMonth"
              @change="handleCommand"
            >
              <el-option
                v-for="i in type67"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueNum"
              ></el-option>
            </el-select>
            <span class="cxjgRight_span">月</span>
          </div>
        </div>
        <div class="li" v-if="xcData.fuelType != '新能源'">
          <div class="left"><span>*</span>排量</div>
          <!--  -->
          <div class="right">
            <el-input
              id="input__inner"
              v-model="xcData.displacement"
              placeholder="请填写排量"
              onkeyup="
					        value=value.replace(/(\.?)\D*(\d*)(\.?)(\d{0,3})([a-zA-Z]*)/,'$1$2$3$4$5') // 只能输入数字、小数点限制3位
                  .replace(/^0+/, '') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
                  .replace(/^\./, '0.')// 第一位为小数点，则替换成 0. 实现自动补全
                  .replace(/\.+([a-z])+/i, '.')// 如果点后面是字母
                  .match(/^\d*(\.?\d{0,3}[a-zA-Z]{0,3})/g)[0] || ''
					    "
              @blur="
                xcData.displacement =
                  $event.target.value.match(
                    /^\d*(\.?\d{0,3}[a-zA-Z]{0,3})/g
                  )[0] || ''
              "
            >
            </el-input>
          </div>
        </div>
        <div class="li" v-if="xcData.fuelType != '新能源'">
          <div class="left"><span>*</span>排放标准</div>
          <div class="right">
            <el-select
              v-model="xcData.emissionStandard"
              placeholder="请选择类型"
              @change="handleCommand"
            >
              <el-option
                v-for="i in type6"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>变速箱</div>
          <div class="right">
            <el-radio-group v-model="xcData.transmissionCase">
              <el-radio label="1">自动</el-radio>
              <el-radio label="2">手动</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>车身颜色</div>
          <div class="right">
            <el-input
              id="input__inner"
              type="text"
              v-model="xcData.exteriorColor"
              placeholder="请填写车身颜色"
            >
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>车身结构</div>
          <div class="cxjgRight">
            <el-select
              v-model="xcData.bodyStructureDoors"
              @change="handleCommand"
            >
              <el-option
                v-for="i in bodyStructureDoorsType"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
            <span class="cxjgRight_span">门</span>
            <el-select
              v-model="xcData.bodyStructureSeat"
              @change="handleCommand"
            >
              <el-option
                v-for="i in bodyStructureSeatType"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
            <span class="cxjgRight_span">座</span>
            <el-select
              v-model="xcData.bodyStructureVehicle"
              @change="handleCommand"
            >
              <el-option
                v-for="i in bodyStructureVehicle"
                :key="i.id"
                :label="i.valueName"
                :value="i.valueName"
              ></el-option>
            </el-select>
            <span class="cxjgRight_span"> 车 </span>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>售价</div>
          <div class="right">
            <el-input
              id="input__inner"
              v-model="xcData.price"
              placeholder="请填写售价"
              onkeyup="
					value=value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,'$1$2$3') // 只能输入数字、小数点限制3位
     .replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
     .replace(/^\./, '0.')  // 如果输入的第一位为小数点，则替换成 0. 实现自动补全
     .match(/^\d*(\.?\d{0,3})/g)[0] || '' // 数字开头、小数点3位
					"
              @blur="
                xcData.price =
                  $event.target.value.match(/^\d*(\.?\d{0,3})/g)[0] || ''
              "
            >
              <template slot="append">万</template>
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>联系电话</div>
          <div class="right">
            <el-input
              id="input__inner"
              disabled
              v-model="xcData.contactNumber"
              placeholder="请填写联系方式"
              onkeyup="value=value.replace(/[^0-9]/g,'')"
            >
            </el-input>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>车况介绍</div>
          <div class="tu">
            <el-input
              class="textarea"
              type="textarea"
              v-model="xcData.vehicleConditionDescription"
              maxlength="300"
              show-word-limit
              autosize
            ></el-input>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left" style="width: 200px">
            <span>*</span>车辆封面图片
          </div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
              :list-type="portraitImg == '' ? 'picture-card' : ''"
              :on-success="portraitSuccess"
              :on-remove="portraitRemove"
              :limit="1"
              ref="upload6"
              :on-change="uploadFile"
              :auto-upload="false"
            >
              <i class="el-icon-plus" v-if="portraitImg == ''"></i>
              <img
                :src="portraitImg"
                style="
                  width: 150px;
                  height: 150px;
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                "
                v-if="portraitImg !== ''"
              />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>

        <div class="li tuLi">
          <div class="left"><span>*</span>车身外观</div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
              list-type="picture-card"
              :limit="9"
              :before-upload="beforeUpload"
              multiple
              :on-exceed="handleExceed"
              :on-success="houseSuccess1"
              :on-remove="houseRemove1"
              :file-list="husPictures1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                style="object-fit: contain; background-color: #00000033"
                :src="dialogImageUrl"
                alt
              />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>仪表中控</div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
              list-type="picture-card"
              :limit="9"
              :before-upload="beforeUpload"
              multiple
              :on-exceed="handleExceed"
              :on-success="houseSuccess2"
              :on-remove="houseRemove2"
              :file-list="husPictures2"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                style="object-fit: contain; background-color: #00000033"
                :src="dialogImageUrl"
                alt
              />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>车厢座椅</div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
              list-type="picture-card"
              :limit="9"
              :before-upload="beforeUpload"
              multiple
              :on-exceed="handleExceed"
              :on-success="houseSuccess3"
              :on-remove="houseRemove3"
              :file-list="husPictures3"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                style="object-fit: contain; background-color: #00000033"
                :src="dialogImageUrl"
                alt
              />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left">车辆视频</div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
              :show-file-list="false"
              :list-type="xcData.vehicleVideo.length == 0 ? 'picture-card' : ''"
              :on-success="houseVideoSuccess"
              :before-upload="beforeUploadVideo"
              :on-remove="houseVideoRemove"
              :on-progress="uploadVideoProcess"
            >
              <video
                v-if="xcData.vehicleVideo.length > 0 && videoFlag == false"
                :src="xcData.vehicleVideo[0]"
                class="avatar"
                style="height: 165px"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-if="
                  xcData.vehicleVideo.length == 0 && videoUploadPercent == 0
                "
                class="el-icon-plus"
              ></i>
              <el-progress
                v-if="videoUploadPercent > 0"
                type="circle"
                :percentage="videoUploadPercent"
                style="margin-top: 10px"
              ></el-progress>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="xieyi">
      <el-checkbox v-model="xieyistate"></el-checkbox>
      <p>
        发布即默认同意
        <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(3)"
          >《帮帮同城用户协议》</span
        >
        <span style="color: #64b6a8; cursor: pointer" @click="toXieyi(2)"
          >《帮帮同城隐私政策》</span
        >
      </p>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="queding" style="margin-right: 15px" @click="onSubmit()">
        确认发布
      </div>
      <div class="queding" style="margin-left: 15px" @click="Drafts()">
        保存草稿
      </div>
    </div>
    <addressmap ref="addmap" key="mapKeys" @address="onaddress"></addressmap>
    <el-dialog title="图片" :visible.sync="dialogFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper
          autoCrop
          :fixedBox="option.fixedBox"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :img="showImg"
          ref="cropper"
          centerBox
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmnn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择车辆品牌弹窗 -->
    <div class="shade" v-if="dialogppcx" @click.stop="ppClose">
      <div class="chooseBrand" @click.stop="">
        <i
          alt=""
          class="close-img el-icon-close"
          style="cursor: pointer; color: #000; font-size: 24px"
          @click.stop="ppClose"
        ></i>
        <div class="search">
          <input
            class="search_input"
            placeholder="搜索品牌"
            @keyup.enter="search"
            v-model="searchpp"
            type="text"
          />
          <p class="el-icon-search search_p" @click="search()"></p>
        </div>
        <div class="selectpp">
          <div class="selectpp_title">选择品牌</div>
          <div class="selectrm">
            <!-- <span class="selectrm_span">热门</span> -->
            <div
              :class="clppsyxz == i ? 'item_active' : 'item'"
              @click="clppsyxzClick(i)"
              v-for="(i, j) in clppsy"
              :key="j"
            >
              {{ i }}
            </div>
          </div>
          <div v-if="clppArry.length != 0" class="selectrm">
            <span class="selectrm_span" style="margin-right: 16px">品牌</span>
            <div
              class="items"
              @click="xzclcxClick(i.id, i.brandName)"
              v-for="(i, j) in clppArry"
              :key="j"
            >
              {{ i.brandName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择车辆车系弹窗 -->
    <div class="shade" v-if="dialogcx" @click.stop="cxClose">
      <div class="chooseBrand" @click.stop="">
        <i
          alt=""
          class="close-img el-icon-close"
          style="cursor: pointer; color: #000; font-size: 24px"
          @click.stop="cxClose"
        ></i>
        <div class="search">
          <input
            class="search_input"
            placeholder="搜索车系"
            @keyup.enter="searchss"
            v-model="searchcx"
            type="text"
          />
          <p class="el-icon-search search_p" @click="searchss()"></p>
        </div>
        <div class="selectpp">
          <div class="selectpp_title">
            选择车系:
            <span @click="xzcxClick(-1)" style="cursor: pointer">不限车系</span>
          </div>
          <div class="selectrm selectrm-detail">
            <div
              class="items"
              @click="xzcxClick(i)"
              v-for="(i, j) in clcxArry"
              :key="j"
            >
              {{ i.seriesName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var uid = 10000;
import addressmap from "./addressMap.vue";
import axios from "axios";
const type66 = [];
const type67 = [];
const tempType67 = [];
for (var i = 1; i <= 12; i++) {
  type67.push({
    id: 3000 - i,
    valueName: i,
    valueNum: i,
  });
  tempType67.push({
    id: 3000 - i,
    valueName: i,
    valueNum: i,
  });
}
var year = new Date().getFullYear();
for (var i = +year; i >= 2000; i--) {
  type66.push({
    id: 66 + i,
    valueName: i,
    valueNum: i,
  });
}

export default {
  components: {
    addressmap,
  },
  name: "sellfrom",
  props: ["chuzu", "edit"],
  data() {
    return {
      type66: type66,
      type67: type67,
      videoFlag: true,
      videoUploadPercent: 0,
      xieyistate: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogppcx: false,
      dialogcx: false,
      type4: [],
      type5: [],
      type6: [],
      type7: [],
      // 车辆品牌索引
      clppsy: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      // 车辆索引选择
      clppsyxz: "A",
      // 车辆品牌数组
      clppArry: [],
      // 车辆车系数组
      clcxArry: [],
      bodyStructureDoorsType: [
        { id: 10, valueName: "一" },
        { id: 11, valueName: "两" },
        { id: 12, valueName: "三" },
        { id: 13, valueName: "四" },
        { id: 14, valueName: "五" },
      ],
      bodyStructureSeatType: [
        { id: 100, valueName: "一" },
        { id: 101, valueName: "两" },
        { id: 102, valueName: "三" },
        { id: 103, valueName: "四" },
        { id: 104, valueName: "五" },
        { id: 105, valueName: "六" },
        { id: 106, valueName: "七" },
      ],
      bodyStructureVehicle: [
        { id: 1000, valueName: "一厢" },
        { id: 1001, valueName: "两厢" },
        { id: 1002, valueName: "三厢" },
        { id: 1003, valueName: "四厢" },
        { id: 1004, valueName: "五厢" },
      ],
      xcData: {
        id: "",
        vehicleClassification: "", //车辆类型
        vehicleBrandModel: "", //车辆品牌型号
        model: "", //车型
        fuelType: "", //燃油类型
        longitude: "",
        latitude: "",
        carViewingPlace: "", //地址
        remarks: "",
        mileage: "", //里程
        numberTransfer: "", //过户次数
        licensingTimeYear: "", //首次上牌时间年
        licensingTimeMonth: "", //首次上牌时间月
        displacement: "", //排量
        emissionStandard: "", //排放标准
        transmissionCase: "", //变速箱
        exteriorColor: "", //车身颜色
        bodyStructureDoors: "",
        bodyStructureSeat: "",
        bodyStructureVehicle: "",
        price: "", //售价
        contactNumber: "", //联系方式
        vehicleConditionDescription: "", //车况介绍

        vehicleCoverPicture: "",
        bodyAppearance: [],
        instrumentCentralControl: [],
        carSeat: [],
        vehicleVideo: [],
      },
      houseImage: [],
      houseVideo: [],
      houseTypeImage: [],
      userInfo: {},
      husPictures: [],
      husPictures1: [],
      husPictures2: [],
      husPictures3: [],
      portraitImg: "",
      showImg: "",
      dialogFormVisible: false,
      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [3, 2], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      searchpp: "",
      searchcx: "",
      user: {},
    };
  },
  mounted() {},
  created() {
    this.getUser();
  },
  watch: {
    "xcData.licensingTimeYear": {
      immediate: true, // 立即执行
      deep: true, // 深度监听复杂类型内变化
      handler(newV, oldV) {
        console.log("newVnewVnewV", newV, oldV);
        if (newV == new Date().getFullYear()) {
          this.type67 = tempType67.slice(0, new Date().getMonth() + 1);
        } else {
          this.type67 = tempType67;
        }
      },
    },
  },

  methods: {
    handleCommandYear(yaer) {},
    async getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.user = JSON.parse(localStorage.getItem("userInfo"));
        this.xcData.contactNumber = this.userInfo.phone;
        await this.getDictionaries();
        console.log("queryqueryquery", this.$route.query);
        if (this.$route.query.type == "second") {
          if (this.$route.query.vehicleId || this.$route.query.id) {
            this.init(
              this.$route.query.vehicleId || this.$route.query.id,
              this.$route.query.examineindex
            );
            // （a，b为1编辑  0为草稿箱）
          }
        }
      } else {
        this.$message({
          message: "登录之后才能发布出租信息！请先去登录",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    init(id, index) {
      console.log("123");
      if (index == 1) {
        // 获取车源数据
        this.$getHttp("/api/mobile/vehicleOwner/queryVehicleInformationById", {
          vehicleId: id,
          userId: this.userInfo.id,
        }).then((res) => {
          let obj = res.vehicleInformation;
          this.xcData.id = obj.id;
          obj.bodyAppearance = this.manageImg(obj.bodyAppearance).map(
            (item) => {
              return {
                name: uid++ + ".jpg",
                url: item,
                id: uid++,
                path: item,
              };
            }
          );
          obj.carSeat = this.manageImg(obj.carSeat).map((item) => {
            return {
              name: uid++ + ".jpg",
              url: item,
              id: uid++,
              path: item,
            };
          });
          obj.instrumentCentralControl = this.manageImg(
            obj.instrumentCentralControl
          ).map((item) => {
            return {
              name: uid++ + ".jpg",
              url: item,
              id: uid++,
              path: item,
            };
          });
          obj.vehicleVideo = this.manageImg(obj.vehicleVideo).map((item) => {
            return {
              name: uid++ + ".mp4",
              url: item,
              id: uid++,
              path: item,
            };
          });
          if (obj.vehicleVideo && obj.vehicleVideo.length > 0) {
            this.videoFlag = false;
          }
          this.portraitImg = obj.vehicleCoverPicture;
          this.husPictures1 = JSON.parse(JSON.stringify(obj.bodyAppearance));
          this.husPictures2 = JSON.parse(JSON.stringify(obj.carSeat));
          this.husPictures3 = JSON.parse(
            JSON.stringify(obj.instrumentCentralControl)
          );

          // console.log(obj.bodyAppearance);
          // husPictures1
          this.recoverNotNull(this.xcData, obj);

          if (obj.intervalPrice != "" && !!obj.intervalPrice) {
            this.xcData.price = "";
            this.minPrice = obj.intervalPrice.split("-")[0];
            this.maxPrice = obj.intervalPrice.split("-")[1];
            this.xcData.minimumPrice = obj.intervalPrice.split("-")[0];
            this.xcData.highestPrice = obj.intervalPrice.split("-")[1];
          }
        });
      } else {
        // return
        // 获取草稿箱数据
        this.$getHttp("/api/mobile/vehicleOwner/getVehicleDraftsById", {
          id: id,
          userId: this.userInfo.id,
        }).then((res) => {
          let obj = res.vehicleDraftsInformation;
          this.xcData.id = obj.id;
          obj.bodyAppearance = this.manageImg(obj.bodyAppearance).map(
            (item) => {
              return {
                name: uid++ + ".jpg",
                url: item,
                id: uid++,
                path: item,
              };
            }
          );
          obj.carSeat = this.manageImg(obj.carSeat).map((item) => {
            return {
              name: uid++ + ".jpg",
              url: item,
              id: uid++,
              path: item,
            };
          });
          obj.instrumentCentralControl = this.manageImg(
            obj.instrumentCentralControl
          ).map((item) => {
            return {
              name: uid++ + ".jpg",
              url: item,
              id: uid++,
              path: item,
            };
          });
          obj.vehicleVideo = this.manageImg(obj.vehicleVideo).map((item) => {
            return {
              name: uid++ + ".mp4",
              url: item,
              id: uid++,
              path: item,
            };
          });
          if (obj.vehicleVideo && obj.vehicleVideo.length > 0) {
            this.videoFlag = false;
          }
          this.portraitImg = obj.vehicleCoverPicture;
          this.husPictures1 = JSON.parse(JSON.stringify(obj.bodyAppearance));
          this.husPictures2 = JSON.parse(JSON.stringify(obj.carSeat));
          this.husPictures3 = JSON.parse(
            JSON.stringify(obj.instrumentCentralControl)
          );
          // console.log(obj.bodyAppearance);
          // husPictures1
          this.recoverNotNull(this.xcData, obj);
          if (obj.intervalPrice != "" && !!obj.intervalPrice) {
            this.xcData.price = "";
            this.minPrice = obj.intervalPrice.split("-")[0];
            this.maxPrice = obj.intervalPrice.split("-")[1];
            this.xcData.minimumPrice = obj.intervalPrice.split("-")[0];
            this.xcData.highestPrice = obj.intervalPrice.split("-")[1];
          }
        });
      }
    },
    priceValidate() {
      if (this.xcData.price == 0 || !this.xcData.price) {
        this.myErrorMessage("请填写售价");
        return false;
      } else {
        return true;
      }
    },
    displacementValidate() {
      if (!this.xcData.displacement) {
        this.myErrorMessage("请输入排量");
        return false;
      }
      var reg = /([0-9.]*)([a-zA-Z]*)/;
      var res = reg.exec(this.xcData.displacement);
      if (!+res[1]) {
        this.myErrorMessage("请输入正确格式的排量");
        return false;
      }
      // console.log(res[1]);
      // console.log((+((+res[1]).toFixed(3))) );
      return true;
    },
    mileageValidate() {
      if (!this.xcData.mileage) {
        this.myErrorMessage("请输入里程");
        return false;
      }

      if (!+this.xcData.mileage) {
        this.myErrorMessage("请输入正确格式的里程");
        return false;
      }
      console.log(this.xcData.mileage);
      console.log(+this.xcData.mileage);
      console.log(+this.xcData.mileage);
      return true;
    },
    async onSubmit() {
      console.log("排量", this.xcData.displacement);
      console.log("里程", this.xcData.mileage);
      console.log("售价", this.xcData.price);
      console.log("过户次数", this.xcData.numberTransfer);
      console.log("过户次数2", +this.xcData.numberTransfer);
      if (!(await this.authUser("卖旧车"))) return;
      if (!this.xieyistate) {
        this.myErrorMessage("请勾选协议政策！");
        return;
      }
      this.xcData.vehicleCoverPicture = this.portraitImg;
      // console.log(this.xcData);
      //       return
      var checkStatus = this.checkData(
        this.xcData,
        {
          vehicleClassification: { tip: "请选择车辆类型" },
          vehicleBrandModel: { tip: "请选择车辆品牌型号" },
          fuelType: { tip: "请选择燃油类型" },
          carViewingPlace: { tip: "请选择地址" },
          remarks: { tip: "请填写车源地" },
          mileage: { validator: this.mileageValidate },
          // numberTransfer: { tip: "请输入过户次数" },
          licensingTimeYear: { tip: "请选择首次上牌时间年" },
          licensingTimeMonth: { tip: "请选择首次上牌时间月" },
          displacement: { validator: this.displacementValidate },
          emissionStandard: { tip: "请选择排放标准" },
          transmissionCase: { tip: "请选择变速类型" },
          exteriorColor: { tip: "请输入车身颜色" },
          bodyStructureDoors: { tip: "请选择门数量" },
          bodyStructureSeat: { tip: "请选择座位数量" },
          bodyStructureVehicle: { tip: "请选择厢车数量" },
          // price: { tip: "请输入售价" },
          price: { validator: this.priceValidate },

          vehicleConditionDescription: { tip: "请输入车况介绍" },

          vehicleCoverPicture: { tip: "请上传车封面图片" },
          bodyAppearance: { tip: "请上传车身外观图片" },
          instrumentCentralControl: { tip: "请上传仪表中控图片" },
          carSeat: { tip: "请上传车厢座椅图片" },
        },
        {
          ignore:
            this.xcData.fuelType == "新能源"
              ? ["displacement", "emissionStandard"]
              : [],
        }
      );
      console.log(JSON.stringify(this.xcData, null, 2));
      if (!checkStatus) return;

      var vehicleData = {
        ...this.xcData,
        vehicleBrandModel:
          this.xcData.vehicleBrandModel == "不限车系"
            ? ""
            : this.xcData.vehicleBrandModel,
        publisherId: this.userInfo.id,
        storeId: this.userInfo.shopId || "",
        vehicleType: 2,

        bodyAppearance: this.xcData.bodyAppearance
          .map((item) => item.path)
          .join("|"),
        instrumentCentralControl: this.xcData.instrumentCentralControl
          .map((item) => item.path)
          .join("|"),
        carSeat: this.xcData.carSeat.map((item) => item.path).join("|"),
        vehicleVideo: this.xcData.vehicleVideo.join("|"),
        id: this.id || "",
        numberTransfer: +this.xcData.numberTransfer,
      };
      // 新能源无排量
      if (vehicleData.fuelType == "新能源") {
        vehicleData.displacement = "";
        vehicleData.emissionStandard = "";
      }

      // console.log(vehicleData);
      // return
      if (this.loadingSubmit) {
        return;
      }

      this.loadingSubmit = true;
      this.$postHttp(
        "/api/mobile/vehicleOwner/releaseVehicle",
        vehicleData
      ).then((res) => {
        if (res.code == 200 && res.success) {
          if (this.draftsId) {
            this.$postHttp(
              "/api/mobile/vehicleOwner/removeVehicleDraftsByIds",
              {
                ids: this.draftsId,
              }
            ).then((res) => {});
          }
          this.mySuccessMessage(res.msg);
          setTimeout(() => {
            this.$router.push({
              path: "/my/bbcz/wdRelease",
            });
          }, 1500);
        } else {
          this.loadingSubmit = false;
        }
      });
    },
    async Drafts() {
      if (!(await this.authUser("卖旧车"))) return;
      //  mileage: "", //里程
      // numberTransfer: "", //过户次数
      // licensingTimeYear: "", //首次上牌时间年
      // licensingTimeMonth: "", //首次上牌时间月
      this.xcData.vehicleCoverPicture = this.portraitImg;
      // console.log(this.xcData);
      //       return
      var checkStatus = this.checkData(
        this.xcData,
        {
          vehicleClassification: { tip: "请选择车辆类型" },
          vehicleBrandModel: { tip: "请选择车辆品牌型号" },
          fuelType: { tip: "请选择燃油类型" },
          carViewingPlace: { tip: "请选择地址" },
          remarks: { tip: "请填写车源地" },
          mileage: { validator: this.mileageValidate },
          // numberTransfer: { tip: "请输入过户次数" },
          licensingTimeYear: { tip: "请选择首次上牌时间年" },
          licensingTimeMonth: { tip: "请选择首次上牌时间月" },
          displacement: { validator: this.displacementValidate },
          emissionStandard: { tip: "请选择排放标准" },
          transmissionCase: { tip: "请选择变速类型" },
          exteriorColor: { tip: "请输入车身颜色" },
          bodyStructureDoors: { tip: "请选择门数量" },
          bodyStructureSeat: { tip: "请选择座位数量" },
          bodyStructureVehicle: { tip: "请选择厢车数量" },
          price: { validator: this.priceValidate },
          vehicleConditionDescription: { tip: "请输入车况介绍" },

          vehicleCoverPicture: { tip: "请上传车封面图片" },
          bodyAppearance: { tip: "请上传车身外观图片" },
          instrumentCentralControl: { tip: "请上传仪表中控图片" },
          carSeat: { tip: "请上传车厢座椅图片" },
        },
        {
          ignore:
            this.xcData.fuelType == "新能源"
              ? ["displacement", "emissionStandard"]
              : [],
        }
      );
      if (!checkStatus) return;

      var vehicleData = {
        ...this.xcData,
        vehicleBrandModel:
          this.xcData.vehicleBrandModel == "不限车系"
            ? ""
            : this.xcData.vehicleBrandModel,
        publisherId: this.userInfo.id,
        storeId: this.userInfo.shopId || "",
        vehicleType: 2,

        bodyAppearance: this.xcData.bodyAppearance
          .map((item) => item.path)
          .join("|"),
        instrumentCentralControl: this.xcData.instrumentCentralControl
          .map((item) => item.path)
          .join("|"),
        carSeat: this.xcData.carSeat.map((item) => item.path).join("|"),
        vehicleVideo: this.xcData.vehicleVideo.join("|"),
        id: this.id || "",
        numberTransfer: +this.xcData.numberTransfer,
      };
      // 新能源无排量
      if (vehicleData.fuelType == "新能源") {
        vehicleData.displacement = "";
        vehicleData.emissionStandard = "";
      }

      console.log(JSON.stringify(vehicleData, null, 2));
      // console.log('vehicleData',vehicleData);
      //   return;
      if (this.loadingDrafts) {
        return;
      }
      this.loadingDrafts = true;
      this.$postHttp(
        "/api/mobile/vehicleOwner/increaseOrModifyVehicleDrafts",
        vehicleData
      ).then((res) => {
        if (res.code == 200 && res.success) {
          if (this.sourceId) {
            this.$postHttp(
              "/api/mobile/vehicleOwner/removeVehicleInformation",
              {
                ids: this.sourceId,
              }
            ).then((res) => {});
          }
          this.mySuccessMessage(res.msg);
          setTimeout(() => {
            this.$router.push({
              path: "/my/bbcz/wdRelease",
            });
          }, 1500);
        } else {
          this.loadingDrafts = false;
        }
      });
    },
    // 切换搜索品牌
    clppsyxzClick(index) {
      this.clppsyxz = index;
      this.clppArry = [];
      this.queryBrand();
    },
    // 切换搜索车系
    xzclcxClick(id, name) {
      this.cxName = name;
      this.dialogppcx = false;
      this.dialogcx = true;
      this.queryRange(id);
    },
    // 选择车系
    xzcxClick(item) {
      if (item == -1) {
        this.xcData.vehicleBrandModel = this.cxName;
      } else {
        this.xcData.vehicleBrandModel = item.seriesName;
      }
      this.dialogcx = false;
      this.Move();
    },
    // 查询品牌
    queryBrand() {
      this.$getHttp("/api/mobile/vehicleOwner/queryVehicleBrandList", {
        initial: this.clppsyxz,
      }).then((res) => {
        this.clppArry = res.vehicleBrandMapList[this.clppsyxz];
      });
    },
    // 查询车系
    queryRange(id) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId",
        {
          brandId: id,
        }
      ).then((res) => {
        this.clcxArry = res.vehicleSeriesList;
      });
    },
    // 车系关闭
    cxClose() {
      this.dialogcx = false;
      this.dialogppcx = true;
      this.clcxArry = [];
      this.queryBrand();
    },
    // 车辆品牌关闭
    ppClose() {
      this.dialogppcx = false;
      this.clppArry = [];
      this.Move();
    },
    //停止页面滚动
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },
    //开启页面滚动
    Move() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = ""; //出现滚动条
      document.removeEventListener("touchmove", m, { passive: true });
    },
    // 搜索品牌
    search() {},
    // 搜索车系
    searchss() {},
    //查询字典(区域)
    getDictionaries() {
      var that = this;
      this.$getHttp("/api/mobile/vehicleOwner/queryDataDictionaryList", {
        type: "4,5,6,7",
      }).then((res) => {
        res.dataDictionaryList.forEach((el) => {
          el.active = false;
          if (el.type == 4) {
            that.type4.push(el);
          } else if (el.type == 5) {
            that.type5.push(el);
          } else if (el.type == 6) {
            that.type6.push(el);
          } else if (el.type == 7) {
            that.type7.push(el);
          }
        });
      });
    },
    toXieyi(id) {
      window.open(
        "https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id=" +
          id,
        "_blank"
      );
    },
    onaddress(item) {
      this.xcData.latitude = item.location.lat;
      this.xcData.longitude = item.location.lng;
      this.xcData.carViewingPlace = item.address;
    },
    addressopen() {
      this.$refs.addmap.open();
    },

    handleCommand() {},
    //数组转String
    arrToString(arr) {
      if (arr.length == 1) {
        return arr[0].path;
      } else {
        let str = [];
        arr.forEach((e) => {
          str.push(e.path);
        });
        return str.join("|");
      }
    },
    houseTypeRemove(file, fileList) {
      for (var i = 0; i < this.houseTypeImage.length; i++) {
        if (this.houseTypeImage[i].id == file.uid) {
          this.houseTypeImage.splice(i, 1);
        }
      }
    },
    houseVideoRemove(file, fileList) {
      // for (var i = 0; i < this.xcData.vehicleVideo.length; i++) {
      // 	if (this.xcData.vehicleVideo[i].id == file.uid) {
      // 		this.xcData.vehicleVideo.splice(i, 1)
      // 	}
      // }
      this.xcData.vehicleVideo = [];
    },
    houseRemove(file, fileList) {
      console.log(file);
      for (var i = 0; i < this.houseImage.length; i++) {
        if (this.houseImage[i].id == file.uid) {
          this.houseImage.splice(i, 1);
        }
      }
    },
    houseRemove1(file, fileList) {
      console.log(file);
      for (var i = 0; i < this.xcData.bodyAppearance.length; i++) {
        if (this.xcData.bodyAppearance[i].id == file.uid) {
          this.xcData.bodyAppearance.splice(i, 1);
        }
      }
    },
    houseRemove2(file, fileList) {
      console.log(file);
      for (var i = 0; i < this.xcData.instrumentCentralControl.length; i++) {
        if (this.xcData.instrumentCentralControl[i].id == file.uid) {
          this.xcData.instrumentCentralControl.splice(i, 1);
        }
      }
    },
    houseRemove3(file, fileList) {
      console.log(file);
      for (var i = 0; i < this.xcData.carSeat.length; i++) {
        if (this.xcData.carSeat[i].id == file.uid) {
          this.xcData.carSeat.splice(i, 1);
        }
      }
    },
    houseTypeSuccess(response, file, fileList) {
      this.houseTypeImage.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    houseSuccess1(response, file, fileList) {
      this.xcData.bodyAppearance.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    houseSuccess2(response, file, fileList) {
      this.xcData.instrumentCentralControl.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    houseSuccess3(response, file, fileList) {
      this.xcData.carSeat.push({
        id: file.uid,
        path: response.data[0].url,
      });
    },
    houseVideoSuccess(response, file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      // this.xcData.vehicleVideo = []
      // this.xcData.vehicleVideo.push({
      // 	id: file.uid,
      // 	path: response.data[0].url,
      // })
      this.xcData.vehicleVideo = [response.data[0].url];

      console.log("111111111111111111111111");
      console.log(this.xcData.vehicleVideo);
    },
    beforeUpload(file, fileList) {
      console.log(1111111111);
      if (file.size / (1024 * 1024) > 20) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于20M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg", "gif"]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
    beforeUploadVideo(file, fileList) {
      if (file.size / (1024 * 1024) > 50) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于50M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb",
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      console.log(file.percentage, "上传进度");
      this.videoUploadPercent = parseFloat(file.percentage.toFixed(0));
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + this.houseImage.length
        } 个文件`
      );
    },
    houseSuccess(response, file, fileList) {
      console.log(this.houseImage);
      this.houseImage.push({
        id: file.uid,
        path: response.data[0].url,
      });
      console.log(this.houseImage);
    },
    portraitSuccess(response, file, fileList) {
      this.portraitImg = response.data[0].url;
    },
    portraitRemove(file, fileList) {
      this.portraitImg = "";
    },
    uploadFile(file, fileList) {
      console.log(file, fileList);
      this.$refs.upload6.clearFiles();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }

        //    this.showImg =file.raw
        this.showImg = URL.createObjectURL(file.raw);
        this.dialogFormVisible = true;
      }
    },
    confirmnn() {
      this.dialogFormVisible = false;
      this.getCropData();
    },
    //   裁剪圖片
    getCropData() {
      let self = this;
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
        };
        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;
          if (response.code === 200) {
            self.portraitImg = response.data[0].url;
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    myErrorMessage(title) {
      this.$message({
        message: title,
        type: "error",
        offset: 120,
        duration: 2000,
      });
    },
    mySuccessMessage(title) {
      this.$message({
        message: title,
        type: "success",
        offset: 120,
        duration: 2000,
      });
    },
    checkData(sourceObj, operation, option) {
      var status = true;
      var value;
      var type;
      var ignoreList = option ? option.ignore || [] : [];
      for (const key in operation) {
        if (status && !ignoreList.includes(key)) {
          if (operation[key].validator) {
            status = operation[key].validator() || false;
            console.log("status", status);
          } else {
            type = Object.prototype.toString.call(sourceObj[key]);
            value = sourceObj[key];
            if (type == "[object Array]") {
              if (value.length <= 0 && operation[key]) {
                status = false;
                operation[key] &&
                  operation[key].tip &&
                  this.myErrorMessage(operation[key].tip);
              }
            } else if (type == "[object String]") {
              console.log("valuevaluevaluevaluevaluevalue", value);
              if (!(value != "") && operation[key]) {
                status = false;
                operation[key] &&
                  operation[key].tip &&
                  this.myErrorMessage(operation[key].tip);
              }
            }
          }
        }
      }
      return status;
    },
    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs && imgs != "") {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
      return [];
    },
    /**
     * 表单对象赋值:
     * 对目标对象存在且源对象同样存在的属性，全部覆盖；
     * 目标对象不存在但是源对象存在的属性， 全部丢弃；
     * 目标对象存在但是源对象不存在的属性，如果是字符串赋值为空串，其余类型赋值为undefined
     */
    recover(target, source) {
      if (target === undefined || target === null) {
        throw new TypeError("Cannot convert first argument to object");
      }
      var to = Object(target);
      if (source === undefined || source === null) {
        return to;
      }
      var keysArray = Object.keys(Object(target));
      for (
        var nextIndex = 0, len = keysArray.length;
        nextIndex < len;
        nextIndex++
      ) {
        var nextKey = keysArray[nextIndex];
        var desc = Object.getOwnPropertyDescriptor(target, nextKey);
        if (desc !== undefined && desc.enumerable) {
          if (to.hasOwnProperty(nextKey)) {
            if (to[nextKey] instanceof Array) {
              to[nextKey] = source[nextKey];
            } else if (to[nextKey] instanceof Object) {
              recover(to[nextKey], source[nextKey]);
            } else if (source[nextKey] !== undefined) {
              to[nextKey] = source[nextKey];
            } else if (typeof to[nextKey] === "string") {
              to[nextKey] = "";
            } else {
              to[nextKey] = undefined;
            }
          }
        }
      }
      return to;
    },

    /**
     * 表单对象赋值:
     * 对目标对象存在且源对象同样存在的属性，全部覆盖；
     * 目标对象不存在但是源对象存在的属性， 全部丢弃；
     * 目标对象存在但是源对象不存在的属性，保留目标对象的属性不做处理
     */
    recoverNotNull(target, source) {
      if (target === undefined || target === null) {
        throw new TypeError("Cannot convert first argument to object");
      }
      var to = Object(target);
      if (source === undefined || source === null) {
        return to;
      }
      var keysArray = Object.keys(Object(target));
      for (
        var nextIndex = 0, len = keysArray.length;
        nextIndex < len;
        nextIndex++
      ) {
        var nextKey = keysArray[nextIndex];
        var desc = Object.getOwnPropertyDescriptor(target, nextKey);
        if (desc !== undefined && desc.enumerable) {
          if (to.hasOwnProperty(nextKey)) {
            if (to[nextKey] instanceof Array) {
              to[nextKey] = source[nextKey];
            } else if (to[nextKey] instanceof Object) {
              recover(to[nextKey], source[nextKey]);
            } else if (source[nextKey] !== undefined) {
              to[nextKey] = source[nextKey];
            }
          }
        }
      }
      return to;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.shade {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;

  .chooseBrand {
    width: 60%;
    padding: 50px 40px;
    background-color: #fff;
    color: #000;
    position: relative;

    .close-img {
      position: absolute;
      top: 12px;
      right: 12px;
      color: #000;
    }

    .search {
      width: 80%;
      height: 50px;
      margin: 0 auto;
      margin-top: 20px;
      position: relative;

      .search_input {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 4px 0px 0px 4px;
        border: 2px solid #64b6a8;
        padding: 14px;
      }

      .search_p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 100%;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #fff;
      }
    }

    .selectpp {
      width: 80%;
      // height: 260px;
      border-radius: 4px 0px 0px 4px;
      border: 1px solid #e0e0e0;
      margin: 0 auto;

      .selectpp_title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
      }

      .selectrm {
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;
        margin-top: 20px;

        &.selectrm-detail {
          margin-left: 0;
          margin-right: 0;

          .items {
            width: calc(100% / 4);
            padding-left: 12px;
            padding-right: 12px;
            margin-right: 0;
            box-sizing: border-box;
          }
        }

        .selectrm_span {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          margin-right: 30px;
        }

        .item {
          width: 20px;
          margin-right: 15px;
          margin-bottom: 10px;
          cursor: pointer;
        }

        .items {
          margin-right: 15px;
          margin-bottom: 10px;
          cursor: pointer;
        }

        .item_active {
          width: 20px;
          margin-right: 15px;
          margin-bottom: 10px;
          cursor: pointer;
          color: #ff8e52;
        }
      }
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .rig {
      position: absolute;
      right: 0;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .xiala {
      width: 130px;
      height: 46px;
      text-align: center;
      line-height: 46px;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .but {
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.form {
  width: 700px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333;

  .name {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 35px;
  }

  .list {
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;

      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;

        span {
          color: red;
        }
      }

      .right {
        display: inline-block;
        width: 550px;

        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }

        .el-select {
          width: 99%;

          /deep/.el-input__inner {
            width: 200px;
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }

        /deep/.el-radio__label {
          font-size: 18px;
        }

        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked + .el-radio__label {
          color: #333;
        }
      }

      .cxjgRight {
        display: inline-block;
        width: 550px;

        .cxjgRight_span {
          margin: 0 10px;
        }

        .el-select {
          width: 92px;
          font-size: 20px;

          /deep/.el-input__inner {
            width: 92px;
            height: 46px;
            border-radius: 4px;
            border: 1px solid #d0d0d0;
            font-size: 16px;
          }
        }
      }

      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;

        .el-textarea {
          font-size: 18px;
        }

        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }

        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }
      }
    }

    .tuLi {
      border: 0;
    }
  }
}

.xieyi {
  width: 550px;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 70px;
  margin-bottom: 25px;

  /deep/.el-checkbox__inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    width: 6px;
    height: 13px;
    left: 9px;
    top: 4px;
    border-left: 0;
    border-top: 0;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #64b6a8;
    border-color: #64b6a8;
  }

  p {
    width: 450px;
    display: inline-block;
  }
}

.queding {
  width: 300px;
  height: 60px;
  background: #64b6a8;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  margin-bottom: 50px;
  cursor: pointer;
}

/deep/#input__inner {
  border: 1px #ffffff solid;
  font-size: 20px;
  height: 23px;
  cursor: pointer;
  padding: 0;
  background-color: #ffffff;
}

/deep/.el-input-group__append {
  border: 0;
  background-color: #ffffff;
}

/deep/.el-select .el-input .el-select__caret {
  color: #0a0a0a !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/deep/.el-select .el-input {
  // width: 550px;
}

/deep/.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>
